<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 50px solid pink;
            padding: 10px;
            overflow: auto;
        }
        /* scrollHeght 和 client 都不记边框 但是记padding*/
    </style>
</head>

<body>
    <div>我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
        我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容 我是内容
    </div>
    <script>
        //  scroll 系列
        var div = document.querySelector('div');
        console.log(div.scrollHeight); // 这是内容的高度
        console.log(div.clientHeight);
        // scroll 滚动事件当我们滚动条发生变化 会触发的事件
        div.addEventListener('scroll', function() {
            console.log(div.scrollTop);
            // scrollTop 就是滚动条 滚到上边的那部分
        })
    </script>
</body>

</html>